@mixin menu {
  .el-menu {
    background-color: $clr-menu-nav-bg-color;
    border-right: none;
    .el-submenu .el-submenu__title {
      color: #fff;
    }
    .el-menu-item {
      color: #ffffff;
    }
    .el-menu-item i, .el-submenu .el-submenu__title i {
      color: #ffffff;
      margin-right: 8px;
      font-size: 20px;
    }
    .el-menu-item:focus, .el-menu-item:hover {
      background-color: rgba(229, 197, 158, 0.1);
    }
    .el-menu-item.is-active {
      background-color: $main-color-01;
      color: #fff;
    }
    .el-submenu__title:hover {
      background-color: rgba(14,98,176,.1);
    }
    .el-submenu.is-opened.is-first-level .el-submenu__title {
      // border-left: 4px solid $main-color-01;
      color: $main-color-01;
      background-color: rgba($main-color-01,.1);
      position: relative;
      &::before {
        display: block;
        content: '';
        width: 4px;
        height: 100%;
        background-color: $main-color-01;
        position: absolute;
        left: 0;
      }

    }
    .el-submenu.is-opened.is-first-level .el-submenu__title i {
      color: $main-color-01;
    }
  }
}
.#{$prefix}-c-menu {
}
.#{$prefix}-left-menu-pop {
  color: #fff;
  background-color: $clr-menu-nav-bg-color;
  &.el-menu--vertical .el-menu--popup {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-left: 0;
  }
  @include menu();
}
